<template>
    <div
        class="smr-deco--waiting-hint smr-deco--waiting-hint--equalizer"
        :style="getInlineStyleOfRootElement"
    >
        <div class="bars-container">
            <div
                v-for="barNumber in _barsCount"
                :key="barNumber"
                class="bar"
                :style="getInlineStyleOfBar(barNumber)"
            ></div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    getNumberSafely,
} from '@/utils'

export type T_SmrDeco_WaitingHint_Equalizer_AnimationStyle = 'wave' | 'flow';

const props = defineProps<{
    barsCount?: number | `${number}`;
    animationPulseDurationUnitInSeconds?: number | `${number}`;
    animationStyle?: T_SmrDeco_WaitingHint_Equalizer_AnimationStyle;
}>()

const _animationStyle = computed<T_SmrDeco_WaitingHint_Equalizer_AnimationStyle>(() => {
    let style = props.animationStyle
    if (!style || ![ 'wave', 'flow' ].includes(style)) {
        style = 'wave'
    }
    return style
})

const _pulseDurationCssValue = computed<`${number}s`>(() => {
    let sec = getNumberSafely(props.animationPulseDurationUnitInSeconds)
    if (!(sec >= 0.25 && sec <= 5)) {
        sec = _animationStyle.value === 'flow' ? 0.75 : 2
    }
    return `${sec}s`
})

const _barsCount = computed<number>(() => {
    let n = Math.floor(getNumberSafely(props.barsCount))
    if (!(n > 2 && n < 32)) {
        n = _animationStyle.value === 'flow' ? 16 : 8
    }

    return n
})



function getInlineStyleOfRootElement () {
    return {
        '--smr-deco--waiting-hint--equalizer--bars-count': _barsCount.value,
        // '--smr-deco--waiting-hint--equalizer--bar-animation-single-loop-duration': _pulseDurationCssValue.value,
    }
}

function getInlineStyleOfBar (barNumber: number) {
    const barsTotalCount = _barsCount.value

    const animationDelayValue: string = props.animationStyle === 'flow'
        ? `calc(var(--smr-deco--waiting-hint--equalizer--bar-animation-single-loop-duration, ${_pulseDurationCssValue.value}) * ${(barNumber - 1) / (barsTotalCount - 1)       - 1})`
        : `calc(var(--smr-deco--waiting-hint--equalizer--bar-animation-single-loop-duration, ${_pulseDurationCssValue.value}) * ${(barNumber - 1) / (barsTotalCount - 1) * 0.4 - 1})`

    return {
        'animation-duration': `var(--smr-deco--waiting-hint--equalizer--bar-animation-single-loop-duration, ${_pulseDurationCssValue.value})`,
        'animation-delay': animationDelayValue,
    }
}
</script>

<style lang="scss">
@use 'sass:math';

.smr-deco--waiting-hint--equalizer {
    $_PaddingX: 0.25rem;
    $_PaddingY: 0.1rem;

    $_Default_FullHeight: 0.8rem;
    $_Default_ScaleYMin: 25%;
    $_Default_BarWidth:    0.2rem;
    $_Default_BarGapWidth: 0.15rem;
    $_Default_BarColor_WithInFullHeight: hsl(100, 75%, 45%);
    $_Default_BarColor_WithInMinHeight:  #0001;
    $_Default_BarBorderRadius: 10rem;

    // --smr-deco--waiting-hint--equalizer--bar-animation-single-loop-duration: 1s;
    // --smr-deco--waiting-hint--equalizer--bar-height-full: $_Default_FullHeight;
    // --smr-deco--waiting-hint--equalizer--bar-scale-y-min: $_Default_ScaleYMin;
    // --smr-deco--waiting-hint--equalizer--bar-width: $_Default_BarWidth;
    // --smr-deco--waiting-hint--equalizer--bar-gap-width: $_Default_BarGapWidth;
    // --smr-deco--waiting-hint--equalizer--bar-color-when-in-full-height: $_Default_BarColor_WithInFullHeight;
    // --smr-deco--waiting-hint--equalizer--bar-color-when-in-min-height:  $_Default_BarColor_WithInMinHeight;
    // --smr-deco--waiting-hint--equalizer--bar-border-radius: $_Default_BarBorderRadius;

    padding: $_PaddingY $_PaddingX;
    width:  calc(($_PaddingX * 2) + var(--smr-deco--waiting-hint--equalizer--bar-width,       $_Default_BarWidth) * var(--smr-deco--waiting-hint--equalizer--bars-count) + var(--smr-deco--waiting-hint--equalizer--bar-gap-width, $_Default_BarGapWidth) * (var(--smr-deco--waiting-hint--equalizer--bars-count) + 1));
    height: calc(($_PaddingX * 2) + var(--smr-deco--waiting-hint--equalizer--bar-height-full, $_Default_FullHeight));

    > .bars-container {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: hidden;
        justify-content: center;
        align-items: center;
    }

    .bar {
        flex: 0 0 var(--smr-deco--waiting-hint--equalizer--bar-width, $_Default_BarWidth);
        display: block;
        height: 100%;
        border-radius:    var(--smr-deco--waiting-hint--equalizer--bar-border-radius,             $_Default_BarBorderRadius);
        margin: auto calc(var(--smr-deco--waiting-hint--equalizer--bar-gap-width,                 $_Default_BarGapWidth) / 2);
        background-color: var(--smr-deco--waiting-hint--equalizer--bar-color-when-in-full-height, $_Default_BarColor_WithInMinHeight);

        animation-timing-function: ease-in-out;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        animation-name: SmrKeyframes_Deco_WaitingHint_EequalizerBar;
        @keyframes SmrKeyframes_Deco_WaitingHint_EequalizerBar {
            0%  {
                height:           var(--smr-deco--waiting-hint--equalizer--bar-scale-y-min,              $_Default_ScaleYMin);
                background-color: var(--smr-deco--waiting-hint--equalizer--bar-color-when-in-min-height, $_Default_BarColor_WithInMinHeight);
            }

            18%, 22% {
                height: 100%;
                background-color: var(--smr-deco--waiting-hint--equalizer--bar-color-when-in-full-height, $_Default_BarColor_WithInFullHeight);
            }

            40%, 100% {
                height:           var(--smr-deco--waiting-hint--equalizer--bar-scale-y-min,              $_Default_ScaleYMin);
                background-color: var(--smr-deco--waiting-hint--equalizer--bar-color-when-in-min-height, $_Default_BarColor_WithInMinHeight);
            }
        }
    }
}
</style>
